<template>
  <nav class="sidebar">
    <div class="sidebar-header">
      <div class="logo-icon">
        <i class="fas fa-hospital"></i>
      </div>
      <div class="logo-text">安心医疗管理系统</div>
    </div>
    <div class="sidebar-menu">
      <SidebarMenuItem
        v-for="item in menuGroups"
        :key="item.key"
        :item="item"
        :active-key="activeKey"
        :open-keys="openKeys"
        @toggle-menu="toggleMenu"
        @menu-click="onMenuClick"
      />
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import SidebarMenuItem from './SidebarMenuItem.vue'
import { ref, watch } from 'vue'
const props = defineProps(['menuGroups', 'activeKey'])
const router = useRouter()
const openKeys = ref<string[]>([])

function toggleMenu(key: string) {
  if (openKeys.value.includes(key)) {
    openKeys.value = openKeys.value.filter(k => k !== key)
  } else {
    openKeys.value.push(key)
  }
}

function onMenuClick(item: any, parentKey?: string) {
  if (item.path) router.push(item.path)
  if (parentKey) openKeys.value = [parentKey]
}

// 自动展开当前激活菜单的父分组
watch(() => props.activeKey, (newKey) => {
  function findParentKey(groups: any[], key: string, parentKey?: string): string | null {
    for (const item of groups) {
      if (item.key === key) return parentKey || null
      if (item.children) {
        const found = findParentKey(item.children, key, item.key)
        if (found) return found
      }
    }
    return null
  }
  const parent = findParentKey(props.menuGroups, newKey)
  if (parent) openKeys.value = [parent]
})
</script>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
.sidebar {
  width: 260px;
  background: #001529;
  color: #fff;
  height: 100vh;
  position: fixed;
  z-index: 100;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}
.sidebar-header {
  padding: 24px 20px 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 15px;
}
.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}
.logo-text {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.sidebar-menu {
  padding: 18px 0;
}
.menu-group {
  margin-bottom: 8px;
}
.main-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.main-menu.open, .main-menu:hover {
  background: rgba(255,255,255,0.06);
  border-left: 3px solid #1890ff;
}
.menu-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-toggle {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle.rotate {
  transform: rotate(180deg);
}
.submenu {
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.submenu.expanded {
  max-height: 800px;
  opacity: 1;
}
.menu-item, .submenu-item {
  padding: 10px 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bfcbd9;
  text-decoration: none;
  font-size: 15px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-item.active, .submenu-item.active {
  background: rgba(24,144,255,0.15);
  color: #1890ff;
  border-left: 3px solid #1890ff;
}
.menu-item:hover, .submenu-item:hover {
  color: #40a9ff;
  background: rgba(24,144,255,0.08);
}
.menu-title {
  padding: 8px 24px 4px 24px;
  font-size: 13px;
  color: #8c98ae;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 2px;
}
</style> 